<div class="mt-4 pt-4 border-t border-dashed border-gray-200 dark:border-gray-700 not-prose">
    <div class="flex items-center gap-2 mb-3 text-sm text-gray-600 dark:text-gray-300">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
             class="w-4 h-4">
            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
            <circle cx="9" cy="7" r="4"/>
            <path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
        </svg>
        <span>贡献者</span>
    </div>
    <div class="flex flex-wrap gap-4">
        <% pageData.gitInfo.contributors.stats.forEach(function(contributor) { %>
            <a href="<%= `https://github.com/${contributor.author}` %>"
               target="_blank"
               rel="noopener noreferrer"
               class="flex items-center gap-2 group">
                <div class="relative w-8 h-8">
                    <!-- 骨架屏加载效果 -->
                    <div class="absolute inset-0 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse"></div>

                    <!-- 头像图片 -->
                    <img src="<%= `https://github.com/${contributor.author}.png?size=40` %>"
                         alt="<%= contributor.author %>"
                         class="relative w-8 h-8 rounded-full"
                         loading="lazy"
                         onload="this.style.opacity='1'; this.previousElementSibling.style.display='none'"
                         onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'; this.previousElementSibling.style.display='none'"
                         style="opacity: 0; transition: opacity 0.2s;">

                    <!-- 首字母占位符 -->
                    <div class="hidden w-full h-full rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300
                                font-medium text-sm flex items-center justify-center uppercase">
                        <%= contributor.author.charAt(0) %>
                    </div>
                </div>
                <div class="text-sm">
                    <div class="text-gray-900 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-blue-400">
                        <%= contributor.author %>
                    </div>
                    <div class="text-gray-500 dark:text-gray-400">
                        <%= contributor.commitCount %> 次提交
                    </div>
                </div>
            </a>
        <% }); %>
    </div>
</div>